import React, {Component, Suspense} from 'react'
import {Route, HashRouter as Router, Switch} from 'react-router-dom'
import {IntlProvider} from 'react-intl'
import { connect } from 'react-redux'

import './app.css'
import Auth from './auth'
import {messages} from './config/i18n.config'

const Login =  React.lazy(() => import('./modules/login/index'))
const NotFound =  React.lazy(() => import( './modules/404/index'))
const Main =  React.lazy(() => import( './modules/main/index'))




const mapStateToProps = (state, ownProps) => {
    return {
        globalState: state.globalState
    }
}

class App extends Component {
    render() {
        const currentLang = this.props.globalState.language
        return (
            <IntlProvider locale={currentLang} messages={messages[currentLang]}>
                <Router>
                    <Suspense fallback={<div>Loading...</div>}>
                        <div style={{height: '100%'}}>
                            <Auth isLogin={!!this.props.globalState.user}>
                                <Switch>
                                    <Route exact path="/" component={Login}/>
                                    <Route exact path="/login" component={Login}/>
                                    <Route path="/main" component={Main}/>
                                    <Route component={ NotFound } />
                                </Switch>
                            </Auth>
                        </div>
                    </Suspense>
                </Router>
            </IntlProvider>
        )
    }
}

export default connect(mapStateToProps)(App)
